<template>
    <a-form class="nvb_login_form" ref="formRef" :model="form">
        <div class="title">用户登录</div>
        <a-form-item
            hide-label
            field="username"
            :rules="[{ required: true, message: '用户名不能为空' }]"
            :validate-trigger="['blur']"
        >
            <a-input
                v-model="form.username"
                placeholder="请输入用户名"
                allow-clear
            >
                <template #prefix>
                    <icon-user />
                </template>
            </a-input>
        </a-form-item>
        <a-form-item
            hide-label
            field="password"
            :rules="[{ required: true, message: '密码不能为空' }]"
            :validate-trigger="['blur']"
        >
            <a-input-password
                v-model="form.password"
                placeholder="请输入密码"
                allow-clear
                @keyup.enter="submit"
            >
                <template #prefix>
                    <IconLock />
                </template>
            </a-input-password>
        </a-form-item>
        <a-button type="primary" @click="submit">登录</a-button>
        <div class="other-login">
            <div class="label">第三方登录</div>
            <div class="icons">
                <a href="">
                    <img src="/image/qq.png" alt="qq" />
                </a>
            </div>
        </div>
    </a-form>
</template>

<script setup lang="ts">
import { IconLock, IconUser } from '@arco-design/web-vue/es/icon'
import { reactive, ref } from 'vue'
import '@/assets/font.css'
import type { ILogin } from '@/types'
import { loginApi } from '@/api'
import { Message } from '@arco-design/web-vue'
import { useStore } from '@/stores'

const store = useStore()

const formRef = ref()
const form = reactive<ILogin>({
    username: '',
    password: '',
})
const emits = defineEmits<{
    (e: 'on-ok'): void
}>()

async function submit() {
    const val = await formRef.value.validate()
    if (val) {
        return
    }
    const res = await loginApi(form)

    if (!res.code) {
        Message.success('登录成功')
        store.setUserInfo(res.data)
        emits('on-ok')
    } else {
        Message.error(res.msg)
    }
}

function formReset() {
    formRef.value.resetFields()
}

defineExpose({
    formReset,
})
</script>

<style lang="scss">
.nvb_login_form {
    .title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--active);
        //color: hotpink;
        text-align: center;
        font-family: kuaikan;
    }

    .other-login {
        margin-top: 20px;

        .label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--color-text-2);
            &::before {
                display: inline-flex;
                width: 35%;
                height: 1px;
                content: '';
                background-color: var(--color-text-3);
            }
            &::after {
                display: inline-flex;
                width: 35%;
                height: 1px;
                content: '';
                background-color: var(--color-text-3);
            }
        }

        .icons {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
            img {
                width: 40px;
            }
        }
    }
}
</style>
